<template> 
  <div class="shop-list"> 
    <div class="cart-header">
      <div class="cart-header-content">
        <p>
          <i
            class="el-icon-shopping-cart-full"
            style="color: rgb(207, 124, 124); font-weight: 600"
          ></i>
          我的购物车
        </p>
        <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
      </div>
    </div>

    <table style="width: 90%">
      <el-table :data="shopList" style="width: 100%">
        <el-table-column
          prop="name"
          label="全选"
          v-model="checkAll"
          @click="handleAllChange"
          show-overflow-tooltip
          :render-header="renderHeader"
          min-width="40%"
        >
          <template>
            <span style="margin-left: 10px">
              <el-checkbox :checke="checked"></el-checkbox>
            </span>
          </template>
        </el-table-column>

        <el-table-column label="id" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="商品图片" width="180">
          <el-image
            style="width: 100px; height: 100px"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          ></el-image>
        </el-table-column>

        <el-table-column label="商品名称" class="name" width="180">
          <a href="/" class="btn">服装</a>
        </el-table-column>

        <el-table-column label="单 价" width="180" class="price">
          <div class="pro-price">{{ 150 }}元</div>
        </el-table-column>

        <el-table-column label="数 量" width="180">
          <template>
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="10"
              label="数量"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <div class="pro-action">
            <el-popover placement="right">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 10px 0 0">
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteItem($event, item.id, item.productID)"
                  >确定</el-button
                >
              </div>
              <i
                class="el-icon-error"
                slot="reference"
                style="font-size: 18px"
              ></i>
            </el-popover>
          </div>
        </el-table-column>
      </el-table>
    </table>

    <div>
      <el-card class="shop-list" style="text-align: ">
        <span class="mar" style="float: left"
          ><a href="/" class="btn">继续购物</a> 共<span>{{ list.length }}</span
          >件商品，已选择<span>{{ checkedNum }}</span
          >件
        </span>
        <span class="mar">合计：￥</span>
        <el-button
          type="danger"
          style="float: right; margin-bottom: 1rem"
          @click="balance"
          >去结算</el-button
        >
      </el-card>
    </div>
  </div>
</template>
<script>
const goodOptions = ["女装", "女鞋", "男装", "男鞋", "手机"];
export default {
  data() {
    return {
      num: 1,
      isIndeterminate: true,
      checkedGoods: [],
      allPrice: 0,
      list: [],
      allChecked: false,
      checkedNum: 0,
      checked: true,
      checkAll: false,
      shopList: [
        {
          id: 1,
          name: "女装",
        },
        {
          id: 2,
          name: "女鞋",
        },
        {
          id: 3,
          name: "男装",
        },
        {
          id: 4,
          name: "男鞋",
        },
        {
          id: 5,
          name: "手机",
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    handleAllChange(val) {
      console.log(val, "555");
      this.checkedGoods = val ? goodOptions : [];
      this.isIndeterminate = false;
      if (val) {
        this.getAllPrice();
      } else {
        this.allPrice = 0;
      }
    },
    /** 表头增加复选框 */
    renderHeader(h, { column }) {
      return h("span", [
        h("el-checkbox", {
          style: "display:inline-flex;margin-right:15px;",
          on: {
            change: this.select,
          },
        }),
        h("span", column.label),
      ]);
    },
    /** 是否勾选表头 */
    select(checked) {
      // 如果checked为true则是勾选了对应的表头
      console.log(checked);
    },
    rederData() {
      this.checkedNum = this.list.filter((item) => item.productSelected).length;
    },
    balance: function () {
      this.$router.push("checkout");
    },
  },
};
</script>
<style lang="postcss" scoped>
* {
  margin: auto;
}
.shop-list .cart-header {
  height: 64px;
  width: 1355px;
  background-color: #fff;
  font-size: 28px;
  color: rgb(207, 124, 124);
  border-bottom: 1px solid rgb(207, 124, 124);
}
.shop-list .cart-header .cart-header-content {
  width: 1325px;
  margin: 0 auto;
  height: 64px;
  line-height: 58px;
}
.mar {
  margin-right: 1rem;
}
.shop-list {
  width: 90%;
  margin-top: 1rem;
}
.btn {
  text-decoration: none;
  color: black;
}
.bbb {
  margin-left: 40px;
  margin-top: 80px;
}
.aaa > label {
  display: block;
  text-align: left;
  margin-top: 20px;
}
.el-checkbox {
  display: block;
  text-align: left;
}
.el-icon-error:before {
    content: "\e79d";
    margin-left: 50px;
}

</style>